<template>
    <div>
        <el-form-item>
            <template #label>
                <el-checkbox v-model="self0ptions.options.isRemark">可填写备注说明</el-checkbox>
            </template>
            <div style="text-align: right" class="cursor-pointer font-color-main" v-if="self0ptions.options.isRemark"
                 @click="openSetting">设置
            </div>
        </el-form-item>


        <el-dialog
                title="备注说明设置"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-form label-position="top" label-width="80px" :model="self0ptions.options.remarkConfig">
                <el-form-item label="备注框显示设置">
                    <el-radio-group v-model="self0ptions.options.remarkConfig.remkBorSet">
                        <el-radio label="默认不显示">默认不显示</el-radio>
                        <el-radio label="默认显示">默认显示</el-radio>
                        <el-radio label="指定场景时显示">指定场景时显示</el-radio>
                    </el-radio-group>

                    <div v-if="self0ptions.options.remarkConfig.remkBorSet == '指定场景时显示'"
                    class="bg-show-cont">
                        <div class="tip-title">备注框显示的场景</div>
                        <el-checkbox-group v-model="self0ptions.options.remarkConfig.remkCheckSet">
                            <el-checkbox label="不得满分时显示"></el-checkbox>
                            <el-checkbox label="得满分时显示"></el-checkbox>
                            <el-checkbox label="不适用时显示"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="是否必填">
                    <el-radio-group v-model="self0ptions.options.remarkConfig.isRequired">
                        <el-radio label="非必填">非必填</el-radio>
                        <el-radio label="必填">必填</el-radio>
                        <el-radio label="特定场景时必填">特定场景时必填</el-radio>
                    </el-radio-group>

                    <div v-if="self0ptions.options.remarkConfig.isRequired == '特定场景时必填'"
                         class="bg-show-cont">
                        <div class="tip-title">必填场景</div>
                        <el-checkbox-group v-model="self0ptions.options.remarkConfig.isRequiredScreen">
                            <el-checkbox label="不得满分时必填"></el-checkbox>
                            <el-checkbox label="得满分时必填"></el-checkbox>
                            <el-checkbox label="不适用时必填"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
            </el-form>
            <el-form label-position="left" label-width="100px" :model="self0ptions.options.remarkConfig">
                <el-form-item label="备注框高度">
                    <el-select v-model="self0ptions.options.remarkConfig.remHeight">
                        <el-option v-for="item in (1,10)" :label="`${item}行`" :value="`${item}行`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "isRemark-editor",
    props: {
        self0ptions: {
            type: Object,
        }
    },
    data() {
        return {
            dialogVisible: false
        }
    },
    methods: {
        openSetting() {
            this.dialogVisible = true
        }
    }
}
</script>
<style scoped lang="scss">
.bg-show-cont{
    background: rgb(247,248,250);
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 10px;
    .tip-title{
        color: #4d4d4d;
        font-size: 12px;
        margin-right: 15px;
    }
}
</style>